<template>
	<view class="content-box">
		<view class="ss-flex-row btn-groups ss-row-around">
			<view class="btn-item" @click="sheep.$router.go('/pages/user/goods-collect')">商品收藏</view>
			<view class="btn-item" @click="sheep.$router.go('/pages/coupon/list')">优惠券</view>
			<view class="btn-item" @click="sheep.$router.go('/pages/user/user-log/user-log')">足迹</view>
			<view class="btn-item" @click="sheep.$router.go('/pages/user/invoice/list')">发票管理</view>
		</view>
		<view class="ss-order-menu-wrap ss-flex ss-col-center">

			<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" v-for="item in orderMap"
				:key="item.title" @tap="sheep.$router.go(item.path, { type: item.value })">
				<uni-badge class="uni-badge-left-margin" :text="numData.order_num[item.type]" absolute="rightTop"
					size="small">
					<image class="item-icon" :src="sheep.$url.cdn(item.icon)" mode="aspectFit"></image>
				</uni-badge>
				<view class="menu-title ss-m-t-28">{{ item.title }}</view>
			</view>
		</view>
		<swiper vertical circular class="swiper" autoplay v-if="state.list&&state.list.length>0">
			<swiper-item v-for="(d,i) in state.list" :key="i">
				<view class="status-bar ss-flex-row ss-row-between ss-col-center">
					<view class="detail ss-flex">
						<image :src="sheep.$url.cdn(d.items[0].goods_image)" class="goods-img"></image>
						<view class="status-txt">{{d.items[0].goods_title}}</view>
						<view class="count-down" v-if="handlerTime(d)">
							剩余时间 <text class="count-down-txt">{{handlerTime(d)}}</text>
						</view>
						<view class="ss-m-l-20" v-else>支付已过期</view>
					</view>
					<template v-if="handlerTime(d)">
						<view class="btn" @click="actionBtn(d)">去支付</view>
					</template>

				</view>
			</swiper-item>
		</swiper>

	</view>

</template>

<script setup>
	/**
	 * 装修组件 - 订单菜单组
	 */
	import sheep from '@/sheep';

	import dayjs from 'dayjs';

	import mitt from '@/sheep/mitt.js';

	import {
		watch,
		computed,
		onMounted,
		reactive
	} from 'vue';

	import {
		useDurationTime
	} from '@/sheep/hooks/useGoods';

	const state = reactive({
		list: [],
	})

	watch(
		() => sheep.$store('user').userInfo.id, (newVal, oldVal) => {
			if (newVal) {
				setTimeout(()=>{
					getOrderList();
				},500)
			}
		})

	const orderMap = [{
			title: '待付款',
			value: '1',
			icon: '/static/user/unpay.png',
			path: '/pages/order/list',
			type: 'unpaid',
		},
		{
			title: '待收货',
			value: '3',
			icon: '/static/user/unreceive.png',
			path: '/pages/order/list',
			type: 'noget',
		},
		{
			title: '待评价',
			value: '4',
			icon: '/static/user/unevaluate.png',
			path: '/pages/order/list',
			type: 'nocomment',
		},
		{
			title: '售后单',
			value: '0',
			icon: '/static/user/refund.png',
			path: '/pages/order/aftersale/list',
			type: 'aftersale',
		},
		{
			title: '全部订单',
			value: '0',
			icon: '/static/user/all.png',
			path: '/pages/order/list',
		},
	];

	const numData = computed(() => sheep.$store('user').numData);

	onMounted(() => {
		if (sheep.$store('user').isLogin) {
			getOrderList();
		}

		mitt.on('userShow', function() {
			if (sheep.$store('user').isLogin) {
				getOrderList();
			}
		})

	})

	function handlerTime(item) {

		if (item.ext.expired_time && item.ext.expired_time !== 0) {

			const time = useDurationTime(item.ext.expired_time);

			if (time.ms <= 0) {
				return '';
			}
			return `${time.h}:${time.m}:${time.s} `;
		}

		return '';
	}


	function actionBtn(item) {
		if (item.status == 'unpaid') {
			sheep.$router.go('/pages/pay/more?orderSN=' + item.order_sn);
		}
	}

	async function getOrderList(page = 1, list_rows = 5) {
		let res = await sheep.$api.order.list({
			type: 'unpaid',
			list_rows,
			page,
		});

		if (res.error === 0) {

			state.list = res.data.data;
		}
	}
</script>

<style lang="scss" scoped>
	.ss-order-menu-wrap {

		.menu-item {
			height: 160rpx;
			position: relative;
			z-index: 10;

			.menu-title {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #333333;
			}

			.item-icon {
				width: 60rpx;
				height: 60rpx;
			}

			.num-icon {
				position: absolute;
				right: 18rpx;
				top: 18rpx;
				// width: 40rpx;
				padding: 0 8rpx;
				height: 26rpx;
				background: #ff4d4f;
				border-radius: 13rpx;
				color: #fefefe;
				display: flex;
				align-items: center;

				.num {
					font-size: 24rpx;
					transform: scale(0.8);
				}
			}
		}
	}

	.content-box {}

	.btn-groups {

		height: 41rpx;
		background: #FAFAFA;
		padding: 13rpx 34rpx 12rpx 30rpx;


		.btn-item {
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: normal;
			line-height: 41rpx;
			letter-spacing: normal;
			color: #494949;
		}


	}

	.status-bar {
		width: calc(100% - 20rpx - 30rpx);
		height: 70rpx;
		border-radius: 20rpx;
		background: #F3F7F8;
		margin-left: 9rpx;
		margin-right: 11rpx;
		margin-bottom: 23rpx;
		padding: 5rpx 20rpx 5rpx 10rpx;

		.detail {
			.goods-img {
				width: 60rpx;
				height: 60rpx;
				margin-right: 9rpx;
			}

			.status-txt {
				width: 200rpx;
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 41rpx;
				text-align: center;
				letter-spacing: normal;
				color: #212121;
				margin-right: 10rpx;

				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出隐藏 */
				text-overflow: ellipsis;
				/* 超出用省略号显示 */
			}

			.count-down {
				font-family: Source Han Sans;
				font-size: 28rpx;
				font-weight: 350;
				line-height: normal;
				letter-spacing: normal;
				/* 剩余时间 */
				color: #9E9E9E;


			}

			.count-down-txt {
				color: #E75555;
			}
		}

		.btn {
			border-radius: 6rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1rpx solid #E75555;
			height: 60rpx;
			padding: 10rpx 18rpx 9rpx 18rpx;

			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 350;
			line-height: 41rpx;
			letter-spacing: normal;
			color: #E75555;

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	.swiper {
		height: 90rpx;
	}
</style>